<template>
  <div class="bar-echart">
    <base-echart :options="option" />
  </div>
</template>

<script setup>
import { computed, defineProps } from "vue";
import BaseEchart from "@/base-ui/echart";
import * as echarts from "echarts";

const props = defineProps({
  xLabel: Array,
  values: Array,
});

const option = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#a4b0be",
        },
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: props.xLabel,
        max: props.xLabel.length - 2,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "销量量",
        type: "line",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
            // 0% 状态时的颜色
            { offset: 0, color: "#1A5980" },
            // 100% 的颜色
            { offset: 1, color: "#26D0CE" },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        symbol: "circle",
        symbolSize: 25,
        lineStyle: {
          color: "#6c50f3",
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 5,
          shadowOffsetX: 5,
        },
        label: {
          show: true,
          position: "top",
          color: "#27478f",
        },
        itemStyle: {
          color: "#27478f",
          borderColor: "#fff",
          borderWidth: 3,
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },

        data: props.values,
      },
    ],
  };
});
</script>

<style lang="less" scoped></style>
